<template>

    <transition name='a'>
        <div v-if="show"  >
    </div>
    </transition>

    <button @click="show=!show">toggle</button>
</template>
<script>
import { ref } from 'vue'
export default {
  setup () {
    const show = ref(true)
    return { show }
  }
}
</script>
<style lang="less" scoped>
div{
    width: 200px;
    height: 200px;
    background-color: aqua;
}
.a-enter-from{
    opacity: 0;
}
.a-enter-active{
    transition: all 2s;
}
.a-enter-to{
    opacity: 1;
}
.a-leave-from{
    opacity: 1s;
}
.a-leave-active{
    transition: all 2s;
}
.a-leave-to{
    opacity: 0;
}

</style>
